import React, { Component } from 'react'
import { Select } from 'antd'
import { getChannels } from '@/api/articles'

export default class Channel extends Component {
  state = {
    channels: [],
  }

  // 获取频道列表数据
  getChannelsData = async () => {
    // 获取频道数据
    const res = await getChannels()
    this.setState({ channels: res.data.channels })
  }
  // 页面渲染完毕请求数据
  componentDidMount() {
    // 好处：两个请求接口可以同时去请求服务器端
    this.getChannelsData()
  }

  render() {
    return (
      // 被设置了 name 属性的 Form.Item 包装的控件，表单控件会自动添加 value和 onChange属性，数据同步将被 Form 接管，这会导致以下结果：
      // 你不再需要也不应该用 onChange 来做数据收集同步（你可以使用 Form 的 onValuesChange），但还是可以继续监听 onChange 事件。
      // 你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。
      // 你不应该用 setState，可以使用 form.setFieldsValue 来动态改变表单值。
      <Select
        placeholder="请选择文章频道"
        style={{
          width: 200,
        }}
        // Option组件的数据
        options={this.state.channels}
        // 定制符合数据的Option组件的value和中间的内容
        fieldNames={{ label: 'name', value: 'id' }}
        // 切换时去触发From.Item中的onChange事件自动修改
        onChange={this.props.onChange}
        // 默认值是由From.Item组件的value得到
        value={this.props.value}
        allowClear
      ></Select>
    )
  }
}
